<template>
  <section>
    <b-spinner v-if="loading" variant="primary" type="grow" label="Spinning" />
    <div v-if="placeholder">
      <div class="an-placeholder">
        <b-alert show variant="warning">文章已失效</b-alert>
      </div>
    </div>
    <div v-else>
      <h4 class="title">
        {{ defData.title }}
      </h4>
      <div>
        <p style="color:#999999;">
          {{ defData.author }} {{ defData.updata_time }}
        </p>
      </div>
      <div class="an-cont">
        <div v-html="defData.article_content"></div>
      </div>
    </div>
  </section>
</template>

<script>
import { getInfo } from "~/assets/services/api";
export default {
  data() {
    return {
      pageTitle: "文章详情",
      abstract: "安然网",
      defData: {},
      id_number: "",
      loading: false,
      placeholder: false
    };
  },
  head() {
    return {
      title: this.pageTitle,
      meta: [
        {
          hid: "articleInfo",
          name: "description",
          content: this.abstract
        }
      ]
    };
  },
  mounted() {
    this.anLoad();
  },
  methods: {
    anLoad() {
      this.id_number = this.$route.query.id;
      this.getData();
    },
    getData() {
      this.loading = true;
      getInfo(this.id_number).then(res => {
        this.loading = false;
        this.pageTitle = res.title;
        this.abstract = res.article_abstract;
        if (res.release_status === "0") {
          this.placeholder = true;
        } else {
          this.defData = res;
        }
      });
    }
  }
};
</script>
<style>
.an-placeholder {
  height: 300px;
  text-align: center;
}
</style>
